<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
<html>
<head>
    <title>用户编辑</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/resources/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css"
          href="<%=request.getContextPath()%>/resources/css/style.css"/>
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/resources/js/jquery.js"></script>
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/resources/js/bootstrap.min.js"></script>
    <script type="application/javascript">
        $(document).ready(function () {
            $('#myForm').submit(function () {
                var rolestr = "";
                $("input[name='roleId']:checked").each(function () {
                    rolestr += $(this).val() + ",";
                });
                jQuery.ajax({
                                url: "update.do?roleIds=" + rolestr,
                                data: $('#myForm').serialize(),
                                type: "POST",
                                error: function (request) {
                                    alert("表单提交出错，请稍候再试！");
                                },
                                success: function (data) {
                                    window.location.href = "list.do";
                                }
                            });
                return false;
            });
        });
    </script>
</head>

<form action="update.do" name="myForm" id="myForm"
      method="post">
    <input type="hidden" name="id" value="${user.id}"/>
    <ul id="myTab" class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">用户</a></li>
        <li><a href="#role" data-toggle="tab">角色</a></li>
    </ul>

    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <table class="table table-bordered table-hover definewidth m10">
                <tr>
                    <td width="10%" class="tableleft">用户名</td>
                    <td><input type="text" id="userName" name="userName" value="${user.userName}"
                               readonly="readonly" class="required"/></td>
                </tr>
                <tr>
                    <td class="tableleft">passport</td>
                    <td><input type="text" id="passport" name="passport" value="${user.passport}"
                               readonly="readonly" class="required"/></td>
                </tr>
                <tr>
                    <td class="tableleft">mobile</td>
                    <td><input type="text" id="mobile" name="mobile" value="${user.mobile}" class="required"/></td>
                </tr>
            </table>
        </div>
        <div class="tab-pane fade" id="role">
            <table class="table table-bordered table-hover definewidth m10">
                <c:forEach items="${rolesMap }" var="role">
                    <tr>
                        <td width="10%" class="tableleft">${role.key.roleName}</td>
                        <td>
                            <c:set var="roleId" value="${role.key.id }"/>
                            <input type="checkbox" name="roleId" id="roleId" value="${role.key.id}"
                                   <c:if test="${not empty checkedMap[roleId]}">checked="checked"</c:if> />
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td>
                <button type="submit" class="btn btn-primary" id="save">保存</button> &nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    $(function () {
        $('#backid').click(function () {
            window.location.href = "list.do";
        });
    });

    $(function(){
        //如果是必填的，加上*标识
        $("form :input.required").each(function(){
            var $required = $("<strong class='high'> *</strong>");
            $(this).parent().append($required);
        });

        //文本框失去焦点后进行验证
        $('form :input').blur(function(){
            var $parent = $(this).parent();
            $parent.find(".formtips").remove();
            //验证用户名
            if( $(this).is('#userName') ){
                if( this.value=="" || this.value.length < 2 ){
                    var errorMsg = '请输入至少2位的用户名.';
                    $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                    var okMsg = '输入正确.';
                    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
            }
            //验证邮件passport
            if( $(this).is('#passport') ){
                if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
                    var errorMsg = '请输入正确的E-Mail地址.';
                    $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else{
                    var okMsg = '输入正确.';
                    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
            }
        }).keyup(function(){
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });

        //提交验证
        $('#save').click(function(){
            $("form :input.required").trigger('blur');
            var numError = $('form .onError').length;
            if(numError){
                return false;
            }
        });
    });
</script>